<script setup>

</script>

<template>
  <!--达人秀-->
  <div class="mt-[10px] bg-[#fff] rounded-[10px] p-[20px]">
    <!--标题-->
    <div class="flex justify-between">
      <div class="font-bold text-[16px]">达人秀(36)</div>
      <div>
        <van-icon name="arrow"/>
      </div>
    </div>
    <!--内容-->
    <div class="grid-content mt-[10px] rounded-[10px] overflow-hidden">
      <div v-for="item in 3" class="show-bgImg flex justify-center items-center">
        <van-icon name="play-circle" size="30" color="rgba(0,0,0,.5)"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.grid-content {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

.show-bgImg {
  height: 120px;
  background: url("@/assets/images/miaosha2.png") no-repeat;
  background-size: cover;
}
</style>
